<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding: 25px;">
      <div class="ele-page-header">
        <div class="ele-page-title">包量套餐</div>
      </div>
      <el-card shadow="never" body-style="padding: 15px 0 25px 0;">
        <el-row :gutter="20"  style="margin-bottom: 20px;">
          <el-col :md="24" :sm="12" :xs="24">
            <el-alert type="info" :closable="false" class="ele-alert-border">
              <span class="text-color">
                形象克隆线路三版：<span  class="point-color">{{avatar_deduct}} 点 / 次 </span>
              </span>
              <span class="text-color">
                形象克隆高级版：<span  class="point-color">{{avatar_high_deduct}} 点 / 次 </span>
              </span>
              <span class="text-color">
                声音克隆入门版：<span class="point-color">{{voice_fast_deduct}} 点 / 次</span>
              </span>
              <span class="text-color">
                声音克隆高保真合成：<span class="point-color">{{voice_high_deduct}} 字 / 点</span>
              </span>
            
             <span class="text-color">
                声音专业版克隆：<span class="point-color">{{xunfei_sound_clone}} 次 / 点</span>
              </span>

<span class="text-color">
                声音专业版合成：<span class="point-color">{{xunfei_sound_generate}}  点/ 100字</span>
              </span>


              
              <span class="text-color">
                线路一视频视频创作：<span class="point-color">{{video_generate_deduct}} 点 / 秒</span>
              </span>
              <span class="text-color">
                线路二视频视频创作：<span class="point-color">{{video_generate_tow_deduct}} 点 / 分钟</span>
              </span>
              <span class="text-color">
                线路三视频创作：<span class="point-color">{{composite_generate_deduct}} 点 / 分钟</span>
              </span>

            </el-alert>
          </el-col>
        </el-row>
        <table class="ele-table ele-table-border ele-table-stripe ele-table-medium">
          <colgroup>
            <col width="180" />
            <col width="120" />
            <col width="120" />
            <col width="120" />
          </colgroup>
          <thead>
          <tr>
            <th style="text-align: center;">套餐名称</th>
            <th style="text-align: center;">充值点数</th>
            <th style="text-align: center;">价格</th>
            <th style="text-align: center;">最终成本说明</th>
          </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in point" :key="index" >
              <td style="text-align: center;">{{ item.name }}</td>
              <td style="text-align: center;">{{ item.point }}</td>
              <td style="text-align: center;"><span class="money-color">¥{{ item.money }}（元）</span> </td>
              <td style="text-align: center;">{{ item.desc }}</td>
            </tr>
          </tbody>
        </table>
      </el-card>

      
     
    </el-card> 
    <el-card shadow="never" body-style="padding: 25px;">
      <div class="ele-page-header">
        <div class="ele-page-title">长期套餐</div>
      </div>
      <el-card shadow="never" body-style="padding: 15px 0 25px 0;">
        
        <table class="ele-table ele-table-border ele-table-stripe ele-table-medium">
          <colgroup>
            <col width="180" />
            <col width="120" />
            <col width="120" />
            <col width="120" />
            <col width="120" />
          </colgroup>
          <thead>
          <tr>
            <th style="text-align: center;">套餐名称</th>
            <th style="text-align: center;">形象克隆</th>
            <th style="text-align: center;">声音克隆</th>
            <th style="text-align: center;">视频剪辑</th>
            <th style="text-align: center;">价格</th>
          </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in count" :key="index" >
              <td style="text-align: center;">{{ item.name }}</td>
              <td style="text-align: center;">{{ item.is_infinite == 1 ? '无限' : item.avatar_twin_count }}</td>
              <td style="text-align: center;">{{ item.is_infinite == 1 ? '无限' : item.voice_twin_count }}</td>
              <td style="text-align: center;">{{ item.is_infinite == 1 ? '无限' : item.video_clip_count }}</td>
              <td style="text-align: center;"><span class="money-color">¥{{ item.money }}（元）</span> </td>
            </tr>
          </tbody>
        </table>
      </el-card>

      
     
    </el-card> 
  </div>
</template>

<script>
  import { accountPackage } from '@/api/package/list';

  export default {
    name: 'PackageInfo',
    components: {  },
    data() {
      return {
        count:[],
        point:[],
        voice_fast_deduct:0,
        voice_best_deduct:0,
        avatar_deduct:0,
        avatar_high_deduct:0,
        face_swap_deduct:0,
        video_generate_deduct:0,
        voice_high_deduct:0,
        composite_generate_deduct:0,
        video_generate_tow_deduct:0,
        xunfei_sound_clone:0,
        xunfei_sound_generate:0,

        // 表单数据
        form: {
          avatar: '',
          name: '',
          id_card_no: '',
          id_card_name: '',
          id_card_front: '',
          id_card_verso: '',
          id_card_address: [],
          id_card_detail: '',
          company_name: '',
          business_no: '',
          business_license: '',
          contact_name: '',
          contact_phone: '',
          company_address:  [],
          company_detail: ''
        },
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {

      dataInit(){
        accountPackage().then((data) => {
          if(data != null){
            this.point = data.point;  
            this.count = data.count;  
            this.avatar_deduct = data.avatar_deduct;  
            this.avatar_high_deduct = data.avatar_high_deduct; 
            this.voice_fast_deduct = data.voice_fast_deduct;  
            this.voice_best_deduct = data.voice_best_deduct;  
            this.face_swap_deduct = data.face_swap_deduct;  
            this.video_generate_deduct = data.video_generate_deduct; 
            this.voice_high_deduct = data.voice_high_deduct; 
            this.composite_generate_deduct = data.composite_generate_deduct; 
            
              this.video_generate_tow_deduct=data.video_generate_tow_deduct; 
         this.xunfei_sound_clone=data.xunfei_sound_clone; 
        this. xunfei_sound_generate=data.xunfei_sound_generate; 
          }
          
        }).catch((e) => {
          this.$message.error(e.message);
        });
      },
     
      /* 保存更改 */
      save(type) {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          const data = {
            ...this.form
          };

          data.type = type;

          infoEdit(data).then((msg) => {
            this.loading = false;
            this.$message.success(msg);
          }).catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
        });
      },
      
    },mounted() {
      this.dataInit();
    },
  };
</script>

<style lang="less" scoped>
  .text-color{
    color: #000 ;
    font-size: 16px;
    width: 245px;
    display: inline-block;
  }
  .point-color{
    color: #1370fb ;
  }
  .money-color{
    color: #f00 ;
  }
</style>
